<template>
  <div id="page-wechat-menu">
    <Card>
      <Alert>俱乐部在自己微信公众号后台配置菜单后将菜单的连接拷贝到里面后即可在微信公众号动菜单中点击跳转到自己俱乐部活动，历史活动，个人积分功能中。会员可以在活动中完成在线报名操作。</Alert>

      <Table
        :columns="columns"
        :data="list"
        :loading="false"
        no-data-text="该查询条件没有任何数据"
        class="mt20">
      </Table>
    </Card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import wechatApi from '@/api/wechat'

  export default {
    name: 'menu-list',
    data () {
      return {
        query: {
          currentPage: 1,
          limit: 50
        },
        loading: false,
        page: {
          total: 0
        },
        columns: [
          {
            title: '菜单名',
            width: 200,
            key: 'wechatMenuName'
          },
          {
            title: '微信链接',
            key: 'wechatMenuUrl'
          },
          {
            title: '描述',
            key: 'wechatMenuMemo'
          }
        ],
        list: []
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async getList () {
        this.loading = true
        const { body } = await wechatApi.menuList(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style lang="less">
  .follow-list {}
</style>
